<template>
  <div class="liquid-fill-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import 'echarts-liquidfill';

// 注册ECharts组件
use([CanvasRenderer]);

interface Props {
  value1?: number;
  value2?: number;
  value3?: number;
  value4?: number;
  radius?: string;
  shape?: string;
  waveAnimation?: boolean;
  direction?: string;
  primaryColor?: string;
  backgroundColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value1: 0.6,
  value2: 0.5,
  value3: 0.4,
  value4: 0.3,
  radius: '80%',
  shape: 'circle',
  waveAnimation: true,
  direction: 'right',
  primaryColor: '#1890ff',
  backgroundColor: '#f0f0f0'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value1: props.value1,
  value2: props.value2,
  value3: props.value3,
  value4: props.value4,
  radius: props.radius,
  shape: props.shape,
  waveAnimation: props.waveAnimation,
  direction: props.direction,
  primaryColor: props.primaryColor,
  backgroundColor: props.backgroundColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '200px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 水球图配置
const chartOption = computed(() => {
  const data = [
    componentProps.value.value1,
    componentProps.value.value2,
    componentProps.value.value3,
    componentProps.value.value4
  ].filter(val => val !== undefined && val !== null);

  return {
    series: [{
      type: 'liquidFill',
      data: data,
      radius: componentProps.value.radius,
      shape: componentProps.value.shape,
      direction: componentProps.value.direction,
      waveAnimation: componentProps.value.waveAnimation,
      color: [componentProps.value.primaryColor, '#91cc75', '#73c0de', '#3ba272'],
      backgroundStyle: {
        color: componentProps.value.backgroundColor
      },
      outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
          color: 'none',
          borderColor: '#294D99',
          borderWidth: 2,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
      },
      label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold',
        insideColor: '#fff',
        formatter: function(param: any) {
          return Math.round(param.value * 100) + '%';
        }
      }
    }]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.liquid-fill-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
</style>
